import React, { Component } from 'react'
import logo from "../../../assets/image/logo.jpg"
import studyLogo from "../../../assets/image/studyLogo.jpeg"
import Icon from '../../../components/icon/Icon'
import styles from "../../../app.less"
import { getSearchHot, getSearchKeyword } from "../../../api/homePage"
import classNames from "classnames"
import { withRouter } from "react-router-dom"
import { connect } from "react-redux"
@connect(
  (state) => ({
    PayingMusic: state.PayingMusic,
  }),
  dispatch => ({
    setMusic: (info) => dispatch({ type: 'platingMusic/save', payload: info }),
  })
)
class Header extends Component {
  state = {
    hotSearch: [],
    hotHidden: true,
    keyword: "",
    keywordsSearchList: [],
    keywordHidden: true,
    delKeyword: true
  }
  componentDidMount() {
    this.getHotSearch()
  }
  getInputDom = element => {
    this.KeywordInput = element
  }
  searchKey = (evt) => {
    if (evt) {
      evt.preventDefault();
    }
    const { keyword } = this.state;
    if (this.KeywordInput.clientWidth < 30) {
      this.KeywordInput.focus()
    } else if (keyword) {
      this.props.history.push({ pathname: "/key_search_music_list", search: "?keyword=" + keyword })
    } else {

    }
  }
  getHotSearch = async () => {
    let res = await getSearchHot()
    let dataList = res.splice(0, 10)
    this.setState({
      hotSearch: dataList
    })
  }
  displayHotSearch = async () => {
    this.setState({
      hotHidden: false,
      keywordHidden: false,
      delKeyword: false
    })
  }
  hiddenHotSearch = async () => {
    setTimeout(() => {
      this.setState({
        hotHidden: true,
        keywordHidden: true,
        delKeyword: true
      })
    }, 100);
  }
  changeSearchValue = async (e) => {
    this.setState({
      keyword: e.target.value
    })
    if (this.searchTime) {
      clearTimeout(this.searchTime);
    }
    if (e.target.value == "") {
      this.setState({
        keywordsSearchList: [],
        keywordHidden: false
      })
      return
    }
    this.searchTime = setTimeout(async () => {
      let res = await getSearchKeyword({ keywords: e.target.value, limit: 10 });
      this.setState({
        keywordsSearchList: res.songs
      })
    }, 100);
  }
  clickHotSearch(item) {
    this.setState({ keyword: item.searchWord }, () => {
      this.searchKey()
    })
  }
  playMusic = async (detail) => {
    // console.log(detail);
    this.props.setMusic(detail)
  }
  render() {
    const { hotSearch, hotHidden, keyword, keywordsSearchList, keywordHidden, delKeyword } = this.state
    return (
      <div className={styles.header_box}>

        <div className={styles.header}>
          <div className={styles.logo_box} onClick={() => { this.props.history.push("/") }}>
            <img className={styles.logo} src={logo} alt="" />
            <span className={styles.logo_title}>音乐</span>
          </div>
          <div className={styles.top_nav}>
            音乐馆
        </div>
          <div className={styles.search_box}>
            <form action="" onSubmit={this.searchKey}>
              <input ref={this.getInputDom} className={styles.search} value={keyword} onChange={this.changeSearchValue} onFocus={this.displayHotSearch} onBlur={this.hiddenHotSearch} placeholder="搜索音乐、MV、歌单、用户" type="text" />
              {
                keyword.length > 0 ? (
                  <div className={classNames(styles.del_btn, { [styles.hidden]: delKeyword })} onClick={() => {
                    this.setState({ keyword: "" })
                  }} >
                    <Icon type="icon-qingchu" />
                  </div>
                ) : null
              }
              <div className={styles.search_btn} onClick={this.searchKey} >
                <Icon type="icon-sousuo" />
              </div>
              <div className={classNames(styles.search_hot_box, { [styles.hidden]: hotHidden || keyword.length !== 0 })}>
                {
                  hotSearch.map((item, index) => (
                    <div key={item.searchWord} className={styles.search_hot_data} onClick={() => { this.clickHotSearch(item) }} >
                      {/* <div className={styles.search_hot_name}>
                    </div> */}
                      <div className={styles.search_hot_data_left}>
                        <img src={item.iconUrl} align="middle" />
                        <span>{index + 1}</span>
                      </div>
                      <div className={styles.search_hot_name} >{item.searchWord}</div>
                    </div>
                  ))
                }
              </div>
              <div className={classNames(styles.keywords_search_box, { [styles.hidden]: keywordHidden || keyword.length === 0 })}>
                {/* <div className={styles.keywords_search_data}>点击搜索-{keyword}</div> */}
                {keywordsSearchList ?
                  <>
                    {/* <div className={styles.keywords_search_data}>以下点击播放单曲</div> */}
                    {keywordsSearchList.map(item => (
                      <div className={styles.keywords_search_data} key={item.id} onClick={() => { this.playMusic(item) }} >
                        <span>{item.name}</span> - {item.artists.map((artist, index) => (
                          <span key={index}>{artist.name}</span>
                        ))}
                      </div>
                    ))}
                  </>
                  :
                  <div className={styles.keywords_search_null}>无数据</div>
                }
              </div>
            </form>
          </div>
          <div className={styles.study_box}>
            <img className={styles.study_img} src={studyLogo} alt="" />
            <a href="https://gitee.com/xiaoxinxinzi/wangyiyun" target="_blank" >学习使用(代码仓库)</a>
          </div>
        </div>
      </div>
    )
  }
}

export default withRouter(Header)
